<template>
  <div class="menue_box">
    <el-menu
      class="el-menu-vertical-demo"
      background-color="transparent"
      text-color="#fff"
      :default-active="currentRouter"
      router
    >
      <div v-for="v in menueTree" :key="v.id">
        <!-- 一级菜单 -->
        <template v-if="!v.children">
          <el-menu-item :index="v.url">
            <i :class="v.icon"></i>{{ v.name }}
          </el-menu-item>
        </template>
        <!-- 多级菜单 -->
        <el-submenu v-else :index="v.id">
          <template slot="title">
            <i :class="v.icon"></i>{{ v.name }}
          </template>
          <template v-for="child in v.children">
            <!-- 这里是递归循环 -->
            <sideMeuns
              v-if="child.children && child.children.length > 0"
              :key="child.url"
            />
            <el-menu-item v-else :key="child.id" :index="child.url">{{
              child.name
            }}</el-menu-item>
          </template>
        </el-submenu>
      </div>
    </el-menu>
  </div>
</template>
<script>
var _this;
export default {
  name: "sideMeuns",
  data() {
    return {
      menueTree: [],
      currentRouter: "/" //当前选中的菜单
    };
  },
  created() {
    _this = this;
  },
  watch: {},
  methods: {
  },
  mounted() {
    _this.menueTree=JSON.parse(localStorage.menueTree)
    _this.currentRouter = this.$route.path;
  }
};
</script>

<style>
</style>